<template>
	<view class="page">
		<view class="problem-form">
			<uni-forms :modelValue="formData" :rules="formRules" ref="formRef" label-position="top" label-width="150">
				<uni-forms-item name="problem_pos" label="位置信息">
					<uni-easyinput :disabled="true" type="textarea" v-model="formData.problem_pos"
						placeholder="请输入位置信息" />
				</uni-forms-item>
				<uni-forms-item name="problem_desc" label="问题描述">
					<uni-easyinput :disabled="true" type="textarea" v-model="formData.problem_desc"
						placeholder="请输入问题描述" />
				</uni-forms-item>
				<uni-forms-item name="problem_img" label="问题图片">
					<uni-file-picker :disabled="true" :readonly="true" :del-icon="false" v-model="formData.problem_img"
						fileMediatype="image" />
				</uni-forms-item>
				<uni-forms-item required name="problem_deal_desc" label="问题处理描述">
					<uni-easyinput :disabled="!canHandleProblem" type="textarea" v-model="formData.problem_deal_desc"
						placeholder="请输入问题处理描述" />
				</uni-forms-item>
				<uni-forms-item name="problem_deal_img" label="问题处理图片(如已处理完毕需上传处理照片，如非本部门责任不需附图)">
					<!-- auto-upload是否自动上传，值为false则只触发@select,可自行上传 -->
					<uni-file-picker :disabled="!canHandleProblem" ref="filePicker" :auto-upload="false" :limit="1"
						v-model="formData.problem_deal_img" fileMediatype="image" mode="grid" @select="onImgSelect"
						@delete="onImgDel" />
				</uni-forms-item>
			</uni-forms>

			<button v-if="canHandleProblem" @tap="submitForm" class="problem-submit"
				hover-class="hover-class">提交安质部审核</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dutyOfficeId: 0,
				userType: '',
				formData: {
					problem_pos: '',
					problem_desc: '',
					problem_img: [],
					problem_deal_status: '',
					problem_deal_desc: '',
					problem_deal_img: []
				},
				formRules: {
					problem_deal_desc: {
						rules: [{
							required: true,
							errorMessage: '请填写问题处理描述'
						}]
					}
				}
			}
		},
		computed: {
			isSafety() {
				return this.userType === 'SAFETY'
			},
			canHandleProblem() {
				const loginRes = uni.getStorageSync('loginRes')
				const officeId = loginRes.officeId || 0
				return officeId > 0 && this.dutyOfficeId === officeId
			}
		},
		onLoad(options) {
			this.recordImageList = []
			this.recordTxtList = []

			const loginRes = uni.getStorageSync('loginRes')
			this.userType = loginRes.userType || ''
			this.questionId = options.id || 0

			this.getQuestionDetail()
		},
		onReady() {
			this.$refs.formRef.setRules(this.formRules)
		},
		methods: {
			onImgSelect(e) {
				console.log('选择文件：', e) //tempFilePaths,tempFiles
				this.formData.problem_deal_img = e.tempFiles //name,path,uuid
				console.log(this.formData.problem_deal_img)
			},
			onImgDel(e) {
				console.log('删除文件：', e)
				this.formData.problem_deal_img = this.formData.problem_deal_img.filter((_) => _.path !== e.tempFile.path)
				console.log(this.formData.problem_deal_img)
			},
			handleProblemResource(creater, data) {
				const recordList = [...data]

				this.recordImageList = recordList.filter((item, index) => {
					return item.type == 'IMAGE'
				})
				if (this.recordImageList.length > 0) {
					this.formData.problem_img = this.recordImageList
						.filter((_) => _.creater === creater)
						.map((_) => {
							return {
								name: _.content,
								extname: 'jpg',
								url: _.content
							}
						})

					this.formData.problem_deal_img = this.recordImageList
						.filter((_) => _.creater !== creater)
						.map((_) => {
							return {
								name: _.content,
								extname: 'jpg',
								url: _.content
							}
						})
				}

				this.recordTxtList = recordList.filter((item, index) => {
					return item.type == 'TEXT'
				})
				if (this.recordTxtList.length > 0) {
					this.formData.problem_deal_desc = this.recordTxtList.map((_) => _.content).join(',')
				}
			},
			async reportQuestionResource({
				content,
				contentType
			}) {
				const params = {
					questionId: this.questionId,
					content,
					contentType
				}

				try {
					const res = await uni.$uu.Api.reportQuestionResource(params)

					console.log(res)

					if (res.code === 100) {}
				} catch (err) {
					console.log(err)
				}
			},
			submitForm(e) {
				console.log('submitForm:', this.formData)
				this.$refs.formRef
					.validate()
					.then(async (res) => {
						console.log('表单数据信息：', res)
						if (this.formData.problem_deal_desc.length > 0) {
							await this.reportQuestionResource({
								content: this.formData.problem_deal_desc,
								contentType: 'TEXT'
							})
						}
						if (this.formData.problem_deal_img.length > 0) {
							await this.reportQuestionResource({
								content: this.formData.problem_deal_img[0].path,
								contentType: 'IMAGE'
							})
						}
						uni.showToast({
							title: `提交审核成功`,
							success: () => {
								uni.navigateBack()
							}
						})
					})
					.catch((err) => {
						console.log('表单错误信息：', err)
					})
			},
			async getQuestionDetail() {
				const params = {
					questionId: this.questionId
				}

				try {
					const res = await uni.$uu.Api.getQuestionDetail(params)

					console.log(res)

					if (res.code === 100) {
						const {
							creater,
							place,
							content,
							resources,
							dutyOfficeId
						} = res.content
						this.dutyOfficeId = dutyOfficeId
						this.formData.problem_pos = place
						this.formData.problem_desc = content
						this.handleProblemResource(creater, resources)
					}
				} catch (err) {
					console.log(err)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/common/app.scss';
	@import './index.scss';
</style>